import React, { Component } from "react";
import Footer from "../../components/Footer";
import { Tabs } from "antd-mobile";
import "./index.less";
import { $discoverList } from "api";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        { title: "路线", kind: "01" },
        { title: "美墅", kind: "02" },
        { title: "活动", kind: "03" },
      ],

      // 发现列表
      list: [],

      // tab分类
      kind: "01",
    };
    this.changeTab = this.changeTab.bind(this);
    this.getList = this.getList.bind(this);
  }

  componentDidMount() {
    this.getList();
  }

  // 获取列表
  getList() {
    let data = {
      kind: this.state.kind,
    };
    $discoverList(data).then((res) => {
      this.setState({
        list: res.result,
      });
    });
  }

  // 切换tab栏
  changeTab(tab) {
    this.setState({
        kind: tab.kind
    },()=> {
      this.getList(); 
    }) 
  }

  render() {
    return (
      <div className="discover-index">
        <Tabs
          tabs={this.state.tabs}
          initialPage={0}
          onTabClick={this.changeTab}
        ></Tabs>

        <div className="list">
          {this.state.list.map((item) => (
            <li key={item.id} className="item lh15 pl-10 pr-10 bg-fff flex">
              <img
                src={item.imageUrl}
                alt=""
              />
              <p className="pt-15 pl-15 pr-15">
                最攻略 | 广东摘果地图！葡萄、百香果、无花果... 周末马上走起！
              </p>
            </li>
          ))}
        </div>

        <Footer activeIndex={4} />
      </div>
    );
  }
}

export default Index;
